<template>
  <view class="page-container">
    <GlobalTopBar ref="topBarRef" class="topbars" :isLeft="true">
      <template #title><text>投诉记录</text></template>
    </GlobalTopBar>
    <!-- 内容 -->
    <view class="page_content">
      <!-- tabs -->
      <!-- <view class="tabs">
        <view
          :class="{ ac: indexs === index }"
          v-for="(item, index) in tabList"
          :key="index + 1"
        >
          {{ item.text }}
        </view>
      </view> -->
      <!-- 列表内容 -->
      <scroll-view
        class="scroll-Y"
        scroll-y
        refresher-enabled
        :refresher-triggered="isRefreshing"
        @refresherrefresh="handleRefresh"
        @scrolltolower="handleLoadMore"
        refresher-background="#f5f5f5"
        refresher-threshold="80"
      >
        <view class="libox" v-for="(item, index) in listData" :key="index + 1">
          <!-- 顶部文字 -->
          <view class="libox_tops">
            <text class="t1" @click.stop="copyFun(item.service_order_tid)"
              >订单号：{{ item.service_order_tid }}</text
            >
            <text class="t2" :class="`a${item.status}`">{{
              item.status === 2 ? '已处理' : '待处理'
            }}</text>
          </view>
          <!-- 中间服务内容 -->
          <view class="li_center flex">
            <image
              class="cen_img"
              :src="item.service_order_goods_info.thumbnail"
              mode="aspectFill"
            />
            <view class="cen_text_box">
              <view>{{
                item.service_order_goods_info.third_goods_category_title
              }}</view>
              <view style="color: #ff0000"
                >￥{{
                  +item.service_order_goods_info.buy_price +
                  +item.service_order_initial_payment_transaction_record
                    .pay_amount
                }}</view
              >
            </view>
          </view>

          <!-- 底部时间以及功能 -->
          <view class="bottom_time_fun flex ac" style="margin-top: 10rpx">
            <!-- <image
              class="time_icon"
              :src="`${store.imgDomain}order_1.png`"
              mode="scaleToFill"
            /> -->
            <text class="time_text">投诉时间：{{ item.create_at }}</text>
          </view>
          <view class="bottom_time_fun flex ac">
            <text class="time_text"
              >投诉内容：{{ item.complaint_content }}</text
            >
          </view>
          <template v-if="item.status === 2">
            <text class="time_text"
              >处理时间：{{
                formatTimestamp(item.deal_at, 'YYYY-MM-DD hh:mm:ss')
              }}</text
            >
            <view class="bottom_time_fun flex ac">
              <text class="time_text">处理内容：{{ item.deal_desc }}</text>
            </view>
          </template>
        </view>
        <view class="flex_center wfw_box" v-if="!listData.length">
          <image
            class="wfw_img"
            :src="`${store.imgDomain}wts_img.png`"
            mode="widthFix"
          />
          <text>暂无投诉</text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, reactive } from 'vue';
import { useCounterStore } from '@/store';
import { onLoad, onShow } from '@dcloudio/uni-app';
import request from '@/utils/request';
import { formatTimestamp } from '@/utils/validate';
import SearchInput from '@/components/SearchInput.vue';

const searchResult = ref('');
const store = useCounterStore();
const userInfo = ref({});
const userAddressList = ref([]);
const isTrue = ref(false);
const isXq = ref(false);
const indexs = ref(0);
// 列表数据相关
const listData = ref([]);
const pageNum = ref(1);
const pageSize = ref(10);
const isNext = ref(true);
// 状态控制
const isRefreshing = ref(false); // 下拉刷新状态
const isLoading = ref(false); // 加载更多状态
const datas = ref({});
const tabList = [
  {
    text: '发起投诉',
  },
  {
    text: '投诉记录',
  },
];

// 获取我的投诉数据列表
const getServiceOrderComplaintList = async (isRefresh = false) => {
  if (isRefresh) {
    pageNum.value = 1;
  }
  try {
    const data = await request('wxapp/user/getServiceOrderComplaintList', {
      currpage: pageNum.value,
      pagesize: pageSize.value,
    });
    isNext.value = data.page.isNext;
    if (isRefresh) {
      listData.value = [...data.list];
    } else {
      listData.value = [...listData.value, ...data.list];
    }
  } finally {
    isRefreshing.value = false;
    isLoading.value = false;
  }
};

// 下拉刷新处理
const handleRefresh = () => {
  // 重置状态
  pageNum.value = 1;
  isRefreshing.value = true;
  // 重新加载数据
  getServiceOrderComplaintList(true);
};

// 触底加载更多处理
const handleLoadMore = () => {
  if (!isNext.value || isLoading.value) return;
  // 加载下一页
  pageNum.value++;
  isLoading.value = true;
  getServiceOrderComplaintList();
};

// 处理搜索事件
const handleSearch = (keyword) => {
  console.log('搜索关键字：', keyword);
  // 这里可以调用接口获取搜索结果等操作
  searchResult.value = `搜索结果：${keyword}`;
};

// 复制文本
const copyFun = (text) => {
  // 复制文本到剪贴板
  uni.setClipboardData({
    data: text, // 要复制的文本
    success: function () {
      console.log('复制成功');
      // 可添加提示信息（如 Toast）
      uni.showToast({
        title: '复制成功',
        icon: 'none',
      });
    },
    fail: function (err) {
      uni.showToast({
        title: '复制失败',
        icon: 'none',
      });
    },
  });
};

onShow(() => {
  getServiceOrderComplaintList(true);
});
</script>

<style lang="scss" scoped>
.topbars {
  background-color: #fff;
}
.topl {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  image {
    width: 750rpx;
    height: 364rpx;
  }
}
.page_content {
  box-sizing: border-box;
  padding: 20rpx;
  position: relative;
}
.scroll-Y {
  height: 80vh;
}

.tabs {
  display: flex;
  justify-content: space-around;
  line-height: 60rpx;
  font-size: 24rpx;
  margin-bottom: 15rpx;
  view {
    position: relative;
    width: max-content;
    &.ac {
      color: #315bc0;
      &::after {
        content: ' ';
        position: absolute;
        width: 100%;
        height: 3rpx;
        bottom: 0;
        left: 50%;
        transform: translate(-50%);
        background-color: #315bc0;
      }
    }
  }
}
.scroll-Y {
  max-height: 80vh;
}
.libox {
  border-radius: 20rpx;
  border: 1rpx solid #437ef6;
  box-sizing: border-box;
  padding: 20rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  // font-size: 24rpx;
  .libox_tops {
    display: flex;
    justify-content: space-between;
    margin-bottom: 35rpx;
    .t1 {
      color: #437ef6;
      text-decoration: underline;
    }
  }
  .li_center {
    .cen_img {
      width: 140rpx;
      height: 140rpx;
      border-radius: 10rpx;
      margin-right: 40rpx;
    }
    .cen_text_box {
      font-size: 30rpx;
      font-weight: 700;
      line-height: 40rpx;
    }
    .cen_sl {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      view {
        width: max-content;
      }
    }
  }
  .cen_je {
    font-size: 30rpx;
    justify-content: flex-end;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #a1cbff;
  }
  .jd_box {
    padding: 20rpx 0;
    border-bottom: 1rpx solid #a1cbff;
    .jd_text {
      position: relative;
      background-color: #3184ff;
      border-radius: 10rpx;
      color: #fff;
      line-height: 46rpx;
      padding: 0 10rpx;
      margin-right: 20rpx;
      &.ac {
        background-color: #ff5400;
        &::after {
          content: ' ';
          position: absolute;
          bottom: -16rpx;
          left: 50%;
          transform: translate(-50%);
          border-top: 10rpx solid #ff5400;
          border-right: 10rpx solid transparent;
          border-bottom: 10rpx solid transparent; /* 填充颜色 */
          border-left: 10rpx solid transparent;
        }
      }
    }
    .phone {
      margin-top: 20rpx;
      padding: 20rpx;
      border-radius: 20rpx;
      background-color: #eaf2fc;
      .head_img {
        width: 50rpx;
        height: 50rpx;
        border: 1rpx solid #047cff;
        border-radius: 50%;
        margin-right: 20rpx;
      }
      .phone_img {
        margin-left: auto;
        image {
          width: 47rpx;
          height: 46rpx;
        }
      }
    }
  }
  .bottom_time_fun {
    padding: 20rpx 0 10rpx;
    &.ac {
      padding: 0;
    }
    .time_icon {
      width: 28rpx;
      height: 29rpx;
      margin-right: 10rpx;
    }
    .time_text {
      // color: #999;
    }
    .btn {
      margin-left: auto;
      line-height: 44rpx;
      border-radius: 22rpx;
      border: 1rpx solid #666666;
      padding: 0 20rpx;
    }
  }
}
.wfw_box {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  flex-direction: column;
  margin-bottom: 30rpx;
  text {
    color: $uni-text-color-grey;
  }
}
.wfw_img {
  margin-bottom: 20rpx;
  width: 200rpx;
}
.t2 {
  &.a1 {
    color: #ff5400;
  }
  &.a2 {
    color: #03db6c;
  }
}
.time_icon {
  width: 28rpx;
  height: 29rpx;
  margin-right: 10rpx;
}
</style>
